import React, { Component } from 'react'
import QCevents from "../utils/events"
class Bottom extends Component {
  // 
  // constructor(props){ // 这个是react类组件的第一个生命周期，可以写可以不写，如果不写，他会自动生成一个
  //     super(props) // 让Bottom这个类继承Component，\
  //     console.log("constructor,我是类组建的第一个生命周期")
  //     this.state = {
  //       index:0
  //     }
  // }
  state = {
     index : 0,
     name:"zhangsan"
   }
   componentWillMount(){ // 组件挂载前
      console.log("componentWillMount 组件挂载前");
   }
  componentDidMount() { // 相当于vue得mounted
    
       console.log("组件挂载后","componentDidMount")
      QCevents.addListener("sendfn",(data)=>{
            this.setState({
              index:data
            })
      })
     //  debugger  阻止程序运行，代码会在浏览器定位，鼠标滑过对应的变量就可以查看对应的变量就可以查看变量对应的值
  }
  componentWillUpdate() {
    console.log("组件更新前");
  }
  componentDidUpdate(){
    console.log("组件更新后")
  }
  componentWillUnmount(){ // 组件将要被卸载得时候执行
    // 清空定时器，销毁插件，比如bettersRCOLL
      console.log("componentWillUnmount,组件卸载前",);
  }
  render() { // 默认执行一次，当页面中的数据发生改变的时候就执行render函数
    return (
      <div>
        {
           
           this.props.send && this.props.send[this.state.index].children && this.props.send[this.state.index].children.length?this.props.send[this.state.index].children.map((item,index)=>{
              return (
               
                  <div key={index}>
                     <span>{item.title}</span>
                     <img src={item.img} alt="" />
                  </div>
              )
           }):"暂无数据"

        }
        <h1>{this.state.name}</h1>
        <button onClick={()=>this.setState({name:"lisi"})}>点击</button>
      </div>
    )
  }
}

export default Bottom